<template>
  <div class="allOrder">
    <!-- 头部开始 -->
    <div class="head">
            <!-- <header class="header-table">
                <el-table
            :data="tableData"
            style="width: 100%"  >
            <el-table-column
                prop="offline"
                label="线下销售金额"
                width="180">
            </el-table-column>
            <el-table-column
                prop="offline_count"
                label="线下销售数量"
                width="180">
            </el-table-column>
            <el-table-column
                prop="online_money"
                label="线上销售金额">
            </el-table-column>
            <el-table-column
                prop="online_count"
                label="线上销售数量">
            </el-table-column>
            </el-table>
    </header> -->
    <!--    抬头表格结束 -->
    <div class="navBar">
      <div class="nameBox">
        <span class="serch-name">姓名：</span><el-input v-model="form.name" placeholder="姓名查询"></el-input>
      </div>
        
      <div class="companyBox">
        <span class="serch-name">单位：</span><el-input v-model="form.company" placeholder="单位查询"></el-input>
      </div>
      
      <div class="orderDate"> 
            <span class="demonstration">订单日期</span>
            <el-date-picker
            v-model="valueTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
            </el-date-picker>
      </div>

      <div class="queryBox">
        <el-button type="primary" icon="el-icon-search" @click="search(form)"  class="Btn">查询</el-button> 
        <el-button type="primary" icon="el-icon-refresh-right" @click="reset" class="Btn">重置</el-button>
      </div>
         
  
        
    </div>
    <!-- 查询框结束 -->
    <div class="head-type">
        <div class="agency-type">
            <div class="type-name">
                类型
            </div>
             
         <el-radio-group v-model="radio" @change.native="choseClient">
          <el-radio :label="clientAll">全部</el-radio>
          <el-radio :label="partner">合伙人</el-radio>
          <el-radio :label="big">大客户</el-radio>
        </el-radio-group>
        </div>
        <!-- 合伙人类型结束 -->
         <div class="agency-type card-type">
            <div class="type-name">
                卡类型
            </div>
             
         <el-radio-group v-model="radio1" @change.native="choseType">
          <el-radio :label="all">全部</el-radio>
          <el-radio :label="visio">虚拟卡</el-radio>
          <el-radio :label="hard">实体卡</el-radio>
        </el-radio-group>
        </div>
        <!-- 卡类型结束 -->
        <div class="exports">
          <el-button type="primary" @click="exportData" class="Btn">导出到excel</el-button>
        </div>
    </div>
    <!-- 2个类型单选结束 -->
    </div>
    <!-- 头部结束 -->

    <!-- 列表开始 -->
    <div class="orderList">
        <el-table
    :data="tableData1.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="order_number"
      label="订单编号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="order_quantity"
      label="订单数量"
      width="60">
    </el-table-column>
    <el-table-column
      prop="name"
      label="名称"
      width="150">
    </el-table-column>
    <el-table-column
      prop="company"
      label="单位"
      width="120">
    </el-table-column>
    <el-table-column
      prop="create_time"
      label="创建时间"
      width="300">
    </el-table-column>
    <el-table-column
      prop="product_name"
      label="产品名称"
      width="90">
    </el-table-column>
    <el-table-column
       prop="sinPrice"
      label="单价"
      width="60">
      <!-- <template slot-scope="scope">
          <span v-if="scope.row.product_name=='年卡'">{{singlePrice}}</span>
          <span v-else>{{singlePrice1}}</span>
      </template> -->
    </el-table-column>
     <el-table-column 
     prop="toPrice"
      label="支付金额"
      width="60">
        <!-- <template slot-scope="scope">
          <span v-if="scope.row.product_name=='年卡'">{{totalPrices}}</span>
          <span v-else>{{totalPrice1}}</span>
        </template> -->
    </el-table-column>
     <el-table-column
      prop="pay_method"
      label="支付方式"
      width="60">
    </el-table-column>
     <el-table-column
      prop="pay_date"
      label="支付时间"
      width="150">
    </el-table-column>
     <el-table-column
      prop="pay_status"
      label="支付状态"
      width="60">
    </el-table-column>
     <el-table-column
      prop="card_type"
      label="卡类"
      width="60">
    </el-table-column>
     <el-table-column
      prop="type"
      label="类型"
      width="60">
    </el-table-column>
   
  </el-table>
    </div>
    <!-- 列表结束 -->
    
    <!-- 分页器 开始 -->
    <div class="pagatations">

       <div class="block"> 
    <el-pagination
     :page-size="4"
      :current-page.sync="currentPage"
      :page-sizes="[4, 8]"
      layout="total,sizes,prev,pager,next,jumper"
      :hide-on-single-page="false"
      :total="total"
      @size-change="sizeChange">
    </el-pagination>
  </div>
    </div>
    
  </div>
</template>

<script>
import {orderListApi } from "../../api/orderlist"
export default {
   name:"OrderList",
   props:['value'],
  watch: {
      valueTime() {
      this.valueTime.forEach(el => {
        el= new Date(
          this.dayjs(el).format("YYYY-MM-DD HH:mm:ss")
        ).getTime()
      });
      console.log(this.startTime);
      console.log(this.endTime);
       orderListApi.getAllOrder({ startTime:this.startTime,endTime:this.endTime}).then((res)=>{
         console.log(res.res);
         this.addMoney(res.res)
        this.tableData1 = res.res
       })
        

    }
   
  },
  
  methods: {
       sizeChange(val) {
      this.pageSize = val;
    },
     handleClick(row) {
        console.log(row);
      },
             handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
            handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      search(val){
        console.log(val); 
        console.log(val);
        orderListApi.getAllOrder(val).then((res =>{
          console.log(res);
          this.tableData1=[]
          this.tableData1=res.res
          this.addMoney(this.tableData1);
          
        }))

      
        } ,
      choseType(){   
        orderListApi.getAllOrder({cardType:this.radio1}).then(res =>{
          console.log(11,res.res); 
          this.tableData1 = res.res;  
           this.addMoney(this.tableData1);
        })
        if(this.radio1 == "全部"){
          this.showAll()
        }
         
      },
      choseClient(){
        console.log(11,this.radio);
        orderListApi.getAllOrder({orderType:this.radio}).then((res) =>{
          this.tableData1 = res.res;
           this.addMoney(this.tableData1);
        })
         if(this.radio == "全部"){
          this.showAll()
        }
      },

      reset(){
        console.log("reset");
          Object.keys(this.form).forEach((key) => (this.form[key] = ''))

        this.showAll()
      },

      showAll(){ 
        orderListApi.getAllOrder().then((res) => {
        this.tableData1 = res.res 
        this.total = res.res.length;
      
        this.addMoney(this.tableData1);
        console.log(this.tableData1);
         
      
      }) 
      } ,
       
      exportData(){
        console.log("hahah");
        this.excelData = this.tableData1; //将你要导出的数组数据（historyList）赋值给excelDate
        this.export2Excel(); //调用export2Excel函数，填写表头（clomns里的type）和对应字段(historyList里的属性名)
      },
          //表格数据写入excel
      export2Excel() {
      var that = this;
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/excel/export2Excel");
        //这里使用绝对路径( @表示src文件夹 )，使用@/+存放export2Excel的路径【也可以写成相对于你当前"xxx.vue"文件的相对路径，例如我的页面放在assets文件夹同级下的views文件夹下的“home.vue”里，那这里路径也可以写成"../assets/excel/Export2Excel"】
        const tHeader = [
          "订单编号",
          "名称",
          "单位",
          "创建时间",
          "产品名称", 
          "支付方式",
          "支付时间",
          "支付状态",
          "卡类",
          "类型",
          "单价",
          "支付金额"
        ]; // 导出的excel表头名信息
        const filterVal = [
          "order_number",
          "name",
          "company",
          "create_time",
          "product_name",
          "pay_method",
          "pay_date",
          "pay_method",
          "pay_status",
          "card_type",
          "type",
          "sinPrice",
          "toPrice"
        ]; // 导出的excel表头字段名，需要导出表格字段名
        const list = that.excelData;
        const data = that.formatJson(filterVal, list);

        export_json_to_excel(tHeader, data, "虚拟卡订单"); // 导出的表格名称，根据需要自己命名
      });
    },
    //格式转换，直接复制即可,不需要修改什么
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },

    addMoney(val){
        var sinPrice = 0;
        var toPrice = 0;
       val.forEach((el,index)=>{
          if(el.product_name == "年卡"){
            sinPrice = 2
            el.sinPrice = sinPrice 
            toPrice = el.sinPrice * el.order_quantity
            el.toPrice = toPrice
          }else if(el.product_name == "次卡"){
             sinPrice = 1
            el.sinPrice = sinPrice
            toPrice = el.sinPrice * el.order_quantity
            el.toPrice = toPrice
          } 

        })
    }

    },
    created(){
      this.showAll()
       
    },
    
   
        data(){
             return { 
                  form:{
                    name:'',
                    company:'',
                    orderType:'',
                    cardType:'',
                    startTime:'',
                    endTime:'',
                  },
                  startTime:'',
                  endTime:'',
                 input1:'',
                 inputPlace:'',
                 radio: 3,
                 radio1:3,
                 valueTime:{startTime:'',endTime:''},
                   all:"全部",
                   hard:"实体卡",
                   visio:"虚拟卡", 
                 clientAll:"全部",
                 partner:"合伙人",
                 big:"大客户",
                  tableData: [{
                    offline: 0,
                    offline_count: 0,
                    online_money: 2.65,
                    online_count:256

          }],
          total: 0,
      pageSize: 4,
      currentPage: 1,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: '',
        value2: '',
        tableData1: [],
         
      };
    }
};
</script>

<style>
  *{
    margin: 0;
    padding: 0;
}

.head{
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    
}

    .header-table{
        margin-bottom: 40px;
        margin-top: 20px;
    }


    .navBar{
        display: flex;
        flex-wrap: nowrap;
        margin-top: 20px;
        margin-bottom: 40px;
        
    }

    .nameBox{
      width: 20%;
      display: flex;
      flex-wrap: nowrap;
    }

    .companyBox{
      width: 20%;
      display: flex;
      flex-wrap: nowrap;
    }

    .orderDate{
      width: 40%;
      display: flex;
      flex-wrap: nowrap;
    }

    .queryBox{
      width: 20%;
      margin-right: 0;
    }

    .serch-name{
      width: 30%;
      line-height: 39px;
    }


    

    .demonstration{
      width: 20%;
      line-height: 39px;
    }

     
    

    .el-date-picker{
        width: 275px;
        margin-right: 40px;
    }
    .el-button{
        margin-left: 20px;
        background-color: transparent;
        color: black;
        border: 1px solid lightgray;
    }

    .head-type{
        display: flex;
        flex-wrap: nowrap;
    }

    .agency-type{
        display: flex;
        flex-wrap: nowrap;
        width: 20%;
        margin-bottom: 20px;
        margin-left: 0;
    }

    .card-type{
      width: 20%;
      margin-left: 170px;
    }
    
    .type-name{
        width: 20%;
        text-align: left;
    }

    .exports{
      width: 20%;
    }

    .el-radio-group{
        width: 20%;
        text-align: left;
    }
     
   

    .el-table .cell{
         text-align: center;
    }

    .allOrder{
      max-height: 400px;
      
    }

    .orderList{
      max-width: 1200px;
      margin: 0 auto;
    }

    .Btn{
      background: rgb(102, 177, 255)  !important;
      color: white;
    }

    .pagatations{ 
      max-width: 1200px;
      margin: 0 auto;
    }

    .block{
      float: right  !important;
    }

    

</style>